﻿@model IEnumerable<Vnsf.WebHost.Models.DocumentViewModel>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<div class="container-smooth">
    @Html.Partial("CreateFolder", new Vnsf.WebHost.Models.Document.FolderCreateModel())
    @Html.Partial("UploadSingleDoc")
</div>
<br />
<table class="table table-hover" id="listoffiles">
    <tr>
        <th>
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Description)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.IsFolder)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.CheckBox("select")
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Description)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.IsFolder)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                @Html.ActionLink("Details", "Details", new { id = item.Id }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.Id })
            </td>
        </tr>
    }

</table>
@section scripts{
    <script type="text/javascript">
        $(function () {
            $('#myModal').on('hidden.bs.modal', function () {
                $('#filelistholder').empty();
                $('#filelistholder').addClass('hide');
                $('#overallbar').css('width', '0%');
            });

            $('#fileupload').fileupload({
                dataType: "json",
                url: "/api/Upload",
                limitConcurrentUploads: 1,
                sequentialUploads: true,
                progressInterval: 100,
                //maxChunkSize: 1000000000,
                //add: function (e, data) {
                //    $('#filelistholder').removeClass('hide');
                //    data.context = $('<div />').text(data.files[0].name).appendTo('#filelistholder');
                //    $('</div><div class="progress"><div class="progress-bar" style="width:0%"></div></div>').appendTo(data.context);
                //    $('#btnUploadAll').click(function () {
                //        data.submit();
                //    });
                //},
                add: function (e, data) {
                    data.context = $('btnUploadAll').text('Upload')
                        .appendTo('#filelistholder')
                        .click(function () {
                            data.context = $('<p/>').text('Uploading...').replaceAll($(this));
                            data.submit();
                        });
                },

                //done: function (e, data) {
                //    data.context.text(data.files[0].name + '... Completed');
                //    $('</div><div class="progress"><div class="progress-bar" style="width:100%"></div></div>').appendTo(data.context);
                //},
                progressall: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('#overallbar').css('width', progress + '%');
                },
                progress: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    data.context.find('.progress-bar').css('width', progress + '%');
                }
            });

        });
    </script>




    @*<script>
            $('#upload').click(function (e) {

                $.ajax({
                    url: "Document/UploadFile",
                    type: "POST",
                    data: $(this).serialize(),
                    success: function (data) {
                        alert("OK");
                    }

                });

            });
        </script>*@
}